function initTabControlDisplay( tabs, contents ) {
	if( tabs.length > 0 ) {
		tabs[0].classList.add( 'active' );
	}

	if( contents.length > 0 ) {
		for( var i = 1; i < contents.length; ++i ) 
			contents[i].style.display = 'none';
	}
}

function initTabControlClick( tabs, contents ) {
	for( var i = 0; i < tabs.length; ++i ) {
		tabs[i].onclick = (function( idx ) {
			return function() {
				for( var i = 0; i < tabs.length; ++i ) {
					if( i == idx ) {
						tabs[i].classList.add( 'active' );
						contents[i].classList.add( 'active' );
						contents[i].style.display = '';
					} else {
						tabs[i].classList.remove( 'active' );
						contents[i].classList.remove( 'active' );
						contents[i].style.display = 'none';
					}
				}
			}
		})( i );
	}
}

function initTabControl( control ) {
	var tab = control.querySelector( '.tab-items' );
	var content = control.querySelector( '.tab-contents' );
	var tabs = [];
	var contents = [];
	for( var i = 0; i < tab.childNodes.length; ++i ) if( tab.childNodes[ i ].nodeType == 1 ) tabs.push( tab.childNodes[i] );
	for( var i = 0; i < content.childNodes.length; ++i ) if( content.childNodes[ i ].nodeType == 1 ) contents.push( content.childNodes[i] );
	initTabControlDisplay( tabs, contents );
	initTabControlClick( tabs, contents );
}

function initTabControls() {
	var controls = document.querySelectorAll( '.tab-control' );
	for( var i = 0; i < controls.length; ++i ) {
		initTabControl( controls[ i ] );
	}
}
